<template>
  <div>
    <div class="table_card" v-loading="loading">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">通用配置</div>
      </div>
      <div class="table_card_header">
        <span class="pl_left"></span>
        <div class="rules_title">其他配置</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="累计入职增加提成" prop="confDay">
                <div class="comeBox">
                  <div class="comeOn">
                    累计入职
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.confDay"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left"
                      ></el-input-number>
                    </div>
                    天, 当月累计手工金额
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.accumulativeMoney"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left"
                      ></el-input-number>
                    </div>
                    元, 增加额外手工提成
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.confHand"
                        :precision="2"
                        :min="0"
                        :max="100"
                        :controls="false"
                        class="text-left"
                      ></el-input-number>
                      <span class="percent">%</span>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="首次充值24h内冻结充值本金比例"
                prop="confOneMoney"
              >
                <el-input-number
                  placeholder="请输入"
                  v-model="ruleForm.confOneMoney"
                  :precision="2"
                  :min="0"
                  :max="100"
                  :controls="false"
                  class="w-200 text-left"
                ></el-input-number>
                <span class="percents">%</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="技师手工提成比例" prop="confHandUser">
                <el-input-number
                  placeholder="请输入"
                  v-model="ruleForm.confHandUser"
                  :precision="2"
                  :min="0"
                  :max="100"
                  :controls="false"
                  class="w-200 text-left"
                ></el-input-number
                ><span class="percents">%</span>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="会员卡指定日期不活跃冻结" prop="confCardDay">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.confCardDay"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-120 text-left"
                  ></el-input-number>
                  <div class="freeze_record">
                    天内会员卡无充值消费记录，即冻结
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="会员卡消费预警通知" prop="riskCardDay">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.riskCardDay"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-80 text-left"
                  ></el-input-number>
                  <div class="freeze_record">
                    天内会员卡消费
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.riskCardOnes"
                      :min="0"
                      :precision="0"
                      :step="1"
                      :controls="false"
                      class="w-80 text-left"
                    ></el-input-number
                    >次,发送预警消息
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="次卡消费预警通知" prop="riskMinorDay">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.riskMinorDay"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-80 text-left"
                  ></el-input-number>
                  <div class="freeze_record">
                    天内门店次卡消费
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.riskMinorOnes"
                      :min="0"
                      :precision="0"
                      :step="1"
                      :controls="false"
                      class="w-80 text-left"
                    ></el-input-number
                    >次,发送预警消息
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="额外赠送金额预警通知" prop="riskExtraDay">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.riskExtraDay"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-80 text-left"
                  ></el-input-number>
                  <div class="freeze_record">
                    天内门店累计额外赠送金额达
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.riskExtraMoney"
                      :precision="2"
                      :min="0"
                      :max="100"
                      :controls="false"
                      class="w-80 text-left"
                    ></el-input-number
                    >元,发送预警消息
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="12">
            <el-col :span="8">
              <el-form-item label="跨店转账比例" prop="crossStore">
                <el-input-number
                  placeholder="请输入"
                  v-model="ruleForm.crossStore"
                  :precision="2"
                  :min="0"
                  :max="100"
                  :controls="false"
                  class="w-400 text-left"
                ></el-input-number>
                <span class="percents">%</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户注册默认门店" prop="custStore">
                <el-select
                  v-model="ruleForm.custStore"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in custStoreListData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="短信验证管理员" prop="smsUser">
                <el-select
                  v-model="ruleForm.smsUser"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in custStoreList"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="预约间隔时间" prop="timeInterval">
                <el-input-number
                  v-model="ruleForm.timeInterval"
                  :precision="0"
                  :step="1"
                  :min="0"
                  class="w-300 text-left"
                  :controls="false"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="小程序未来可预约小时" prop="reservationHour">
                <el-input-number
                  v-model="ruleForm.reservationHour"
                  :precision="0"
                  :step="1"
                  :min="0"
                  class="w-300 text-left"
                  :controls="false"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="小程序利润分析配置" prop="profitAnalysisDay">
                <div class="comeBox">
                  <div class="comeOn">
                    小程序门店利润分析每月
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.profitAnalysisDay"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left"
                      ></el-input-number>
                    </div>
                    号可查看
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.profitAnalysisMoon"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left"
                      ></el-input-number>
                    </div>
                    月数据
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table_card_header">
        <span class="pl_left"></span>
        <div class="rules_title">门店职位配置</div>
      </div>
      <div class="postName_form">
        <el-form
          :model="ruleForm"
          :rules="Rolerules"
          ref="RoleForm"
          label-width="120px"
          label-position="top"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="门店店长" prop="roleStore">
                <el-select
                  v-model="RoleForm.roleStore"
                  placeholder="请选择角色"
                  multiple
                >
                  <el-option
                    v-for="item in MemberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店技师" prop="roleArtificer">
                <el-select
                  v-model="RoleForm.roleArtificer"
                  placeholder="请选择角色"
                  multiple
                >
                  <el-option
                    v-for="item in MemberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店前台" prop="roleReception">
                <el-select
                  v-model="RoleForm.roleReception"
                  placeholder="请选择角色"
                  multiple
                >
                  <el-option
                    v-for="item in MemberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店保洁" prop="roleClean">
                <el-select
                  v-model="RoleForm.roleClean"
                  placeholder="请选择角色"
                  multiple
                >
                  <el-option
                    v-for="item in MemberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveParameter" :loading="loading"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
          
<script>
import {
  Checkcurrency,
  getRoleList,
  CreateCurrency,
  getUerAllList,
} from "@/api/business/parameter";
import { getAllStorelists } from "@/api/business/order";
export default {
  name: "EryuoaStoregeneral",

  data() {
    return {
      multiple: true,
      ruleForm: {
        custStore: "",
        smsUser: "",
      },
      activeIndex: 1,
      MemberList: [], // 角色列表
      RoleForm: {},
      loading: false,
      rules: {
        confDay: [{ required: true, message: "请输入", trigger: "blur" }],
        accumulativeMoney: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        confHand: [{ required: true, message: "请输入", trigger: "blur" }],
        confOneMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        confCardDay: [{ required: true, message: "请输入", trigger: "blur" }],
        riskCardDay: [{ required: true, message: "请输入", trigger: "blur" }],
        crossStore: [{ required: true, message: "请输入", trigger: "blur" }],
        custStore: [{ required: true, message: "请选择", trigger: "blur" }],
        smsUser: [{ required: true, message: "请选择", trigger: "blur" }],
        timeInterval: [{ required: true, message: "请输入", trigger: "blur" }],
        reservationHour: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        riskMinorDay: [{ required: true, message: "请输入", trigger: "blur" }],
        riskExtraDay: [{ required: true, message: "请输入", trigger: "blur" }],
        // confHandUser: [{ required: true, message: "请输入", trigger: "blur" }],
        profitAnalysisDay: [{ required: true, message: "请输入", trigger: "blur" }],
      },

      Rolerules: {
        roleStore: [{ required: true, message: "请选择角色", trigger: "blur" }],
        roleArtificer: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        roleReception: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        roleClean: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },

      title: "",
      value1: "",

      value: "",
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        type: 1, // 设置类型：1楼层设置2房间类型3床位管理
      },
      total: 0,
      custStoreList: [],
      custStoreListData: [],
    };
  },

  created() {
    this.getList();
    this.getMembers();
    this.getUser();
  },

  mounted() {},

  methods: {
    // 用户
    getUser() {
      getUerAllList({ inStatusStr: "4,5" }).then((response) => {
        console.log(response, "response");
        this.custStoreList = response.data;
      });
    },

    // 门店
    getStorelist() {
      getAllStorelists({})
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.custStoreListData = data;
          }
        })
        .catch((err) => {});
    },
    SaveParameter() {
      CreateCurrency({
        ...this.ruleForm,
        ...this.RoleForm,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.getList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        })
        .catch((err) => {});
    },

    resQ() {
      this.queryParams.pageNo = 1;
      this.total = 0;
      // this.floorData = [];
      this.getList();
      this.getMembers();
      this.getStorelist();
    },

    // 获取角色
    getMembers() {
      getRoleList()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.MemberList = data;
          }
        })
        .catch((err) => {});
    },

    getList() {
      this.loading = true;
      Checkcurrency()
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm.confDay = data.confDay;
            // this.ruleForm.confHandUser = data.confHandUser;
            this.ruleForm.confHand = data.confHand;
            this.ruleForm.accumulativeMoney = data.accumulativeMoney;
            this.ruleForm.confOneMoney = data.confOneMoney;
            this.ruleForm.confCardDay = data.confCardDay;
            this.ruleForm.riskCardDay = data.riskCardDay;
            this.ruleForm.crossStore = data.crossStore;
            this.ruleForm.custStore = data.custStore;
            this.ruleForm.smsUser = data.smsUser;
            this.ruleForm.timeInterval = data.timeInterval;
            this.ruleForm.reservationHour = data.reservationHour;
            this.ruleForm.profitAnalysisMoon = data.profitAnalysisMoon;
            this.ruleForm.profitAnalysisDay = data.profitAnalysisDay;
            this.ruleForm.riskCardOnes = data.riskCardOnes;
            this.ruleForm.riskMinorDay = data.riskMinorDay;
            this.ruleForm.riskMinorOnes = data.riskMinorOnes;
            this.ruleForm.riskExtraDay = data.riskExtraDay;
            this.ruleForm.riskExtraMoney = data.riskExtraMoney;
            this.RoleForm.roleStore = data.roleStore;
            this.RoleForm.roleArtificer = data.roleArtificer;
            this.RoleForm.roleReception = data.roleReception;
            this.RoleForm.roleClean = data.roleClean;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    SethandleClose() {
      this.resetFormData("floorSortForm");
      this.$nextTick(() => {
        this.SetdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>
          
  <style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  // padding-bottom: 100px;
  margin-top: 20px;
}
.ipt_iner {
  margin-top: 10px;
}

.table_card_header {
  background-color: #f7f8fa;
  padding: 5px 24px;
}

.comeBox {
  position: relative;
  .comeOn {
    display: flex;
    .Come_ipt {
      width: 80px;
      margin: 0 10px;
      .el-input-number {
        width: 80px;
      }
    }
    .percent {
      position: absolute;
      left: 620px;
    }
  }
}

.postName_form {
  padding-left: 20px;
  padding-bottom: 100px;
  margin-top: 20px;
  position: relative;
  .el_btn_bottom {
    position: absolute;
    left: 800px;
    bottom: 20px;
  }
}

.freeze {
  display: flex;
  .freeze_record {
    margin-left: 10px;
  }
}

.percents {
  padding-left: 10px;
}
</style>